<template>
   <div class="app-container">

      <el-button type="primary" @click="submit">保存</el-button>
      <el-table v-loading="loading" :data="eventList" @selection-change="xdEventListSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="编号" prop="id" width="120" />
         <el-table-column label="基本事件名称" prop="eventName" min-width="220" />
         <el-table-column label="基本事件描述" prop="eventNumber" width="220" />
      </el-table>


      <el-divider content-position="left">设备查询</el-divider>
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
         <el-form-item label="设备查询" prop="componentNumber">
            <el-input v-model="queryParams.componentNumber" placeholder="请输入设备编码" clearable style="width: 240px"
               @keyup.enter="handleQuery" />
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
         </el-form-item>
      </el-form>

      <!-- 表格数据 -->
      <el-table v-loading="loading" ref="taskTableRef" :data="componentList" highlight-current-row
         @select="selectClick">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="编号" prop="id" width="220" />
         <el-table-column label="设备名称" prop="componentName" min-width="420" />
         <el-table-column label="设备编码" prop="componentNumber" width="420" />
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize" @pagination="getList" />
   </div>

</template>

<script setup name="Component">
import { listComponent, editComponent } from "@/api/factoryInfo/component/component";
const { proxy } = getCurrentInstance();

const emits = defineEmits(['message']);
import { ref } from 'vue';
const taskTableRef = ref(); // 表格ref

const openDataScope = ref(false);
const eventList = ref([]); //选择基本事件总集合
const oneEventList = ref([]); //单独设备选中集合
const componentList = ref([]);
const xztList = ref([]);
const total = ref(0);
const data = reactive({
   form: {},
   queryParams: {
      pageNum: 1,
      pageSize: 5
   },
});
const { queryParams, form, rules } = toRefs(data);

/** 查询列表 */
function getList() {
   listComponent(queryParams.value).then(response => {
      componentList.value = response.rows;
      total.value = response.total;
   });
}

getList();

/** 搜索按钮操作 */
function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
}

/** 单选 */
// table选择项发生变化时会触发该事件
const selectClick = (selection, row) => {
   if (selection.length > 1) {
      let del_row = selection.shift();
      taskTableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；第二个参数为true时又变成了多选
      eventList.value = selection[selection.length - 1].eventsList
      xztList.value = selection[selection.length - 1]
   } else {
      eventList.value = selection[0].eventsList;
      xztList.value = selection[selection.length - 1]
   }
}


/** 取消按钮（数据权限）*/
function cancelDataScope() {
   openDataScope.value = false;
   reset();
}


/** 基本事件多选框选中数据 */
function xdEventListSelectionChange(selection) {
   oneEventList.value = selection;
}



async function submit() {
   emits('save', oneEventList.value, xztList.value);
}
</script>